<template >
  <div class="index-user-details">
    <div style="padding: 5px;">
      <img v-if="userinfo.avatar != ''" class="index-user-details-avatar" :src="userinfo.avatar" />
      <img v-else class="index-user-details-avatar" src="@/assets/imgs/default_user_avatar.jpg">
    </div>
    <div class="nickname">{{ userinfo.nickname }}</div>
    <div class="username">{{ userinfo.username }}</div>
    <div class="userid">ID:{{ userinfo.userId }}</div>
    <div class="btn-container">
      <el-button type="primary" :icon="Star">关注事件</el-button>
      <el-button type="primary" :icon="UserFilled">用户设置</el-button>
    </div>
    <div class="btn-container">
      <el-button type="primary" :icon="EditPen">修改密码</el-button>
      <el-button type="primary" :icon="Key" @click="logout">退出登录</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Star, EditPen, Key, UserFilled } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus'
import { storeToRefs } from 'pinia';
import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore();
const { userinfo } = storeToRefs(authStore);

const logout = () => {
  ElMessageBox.confirm('是否退出登录', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(() => {
    authStore.logout();
  }).catch(() => {
    // catch error
  })
}

</script>

<style scoped lang="scss">
.index-user-details {
  @include flex(column, flex-start, flex-start);

  .index-user-details-avatar {
    @include box(100%, 100%);
    border-radius: 5px;
    object-fit: cover;
    box-shadow: 3px 3px 7px 3px rgba(107, 104, 104, 0.3);
    transition: 0.3s;

    [class="dark"] & {
      box-shadow: 3px 3px 7px 3px rgba(0, 0, 0, 0.8);
      filter: brightness(80%);
    }

    &:hover {
      box-shadow: var(--xz-box-shadow-dark);
      box-shadow: 5px 5px 10px 3px rgba(107, 104, 104, 0.7);

      [class="dark"] & {
        box-shadow: 1px 5px 10px 3px rgba(255, 255, 255, 0.3);
      }
    }
  }


  .nickname {
    @include box(100%, 30px);
    @include font(25px, 700);
    margin-top: 20px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
  }

  .username {
    @include box(100%, 20px);
    @include font(15px, 700);
    margin: 5px 0;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
  }

  .userid {
    @include box(100%, 15px);
    @include font(13px);
    margin-bottom: 10px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
  }

  .btn-container {
    @include box(100%, 30px);
    @include flex(row, space-between, center);
    padding: 0 10px;
  }
}
</style>
